<template>
  <div style="min-width: 300px;width: 100%;">
    <el-form inline>
      <!-- <el-form-item :label="$t('Online')">
        <el-switch :value="device.online" :active-text="$t('Yes')" :inactive-text="$t('No')"></el-switch>
      </el-form-item> -->
      <!-- <el-form-item>
        <el-switch :value="device.door" :active-text="$t('lock.Opened')"
          :inactive-text="$t('lock.Closed')" />
      </el-form-item> -->
      <el-form-item v-if="device.online">
        <el-button type="text" @click="deviceCommand('control','open')" icon="el-icon-unlock" :disabled="device.door" />
      </el-form-item>
      <el-form-item :label="$t('')">
        <el-switch v-model="device.status" :active-text="$t('device.PowerOn')" :inactive-text="$t('Off')"
          :disabled="!device.online" @change="deviceCommand('control',$event?'on':'off')" />
      </el-form-item>
      <el-form-item :label="$t('')">
        <el-switch v-model="device.sterilize" :active-text="$t('device.Sterilize')" :inactive-text="$t('Off')"
          :disabled="!device.online" @change="deviceCommand('control',$event? 'uvOn':'uvOff')" />
      </el-form-item>
      <el-form-item v-if="device.online">
        <el-button type="text" @click="handleRefresh" icon="el-icon-refresh" />
      </el-form-item>
    </el-form>
    <el-row v-if="statusList.length > 0">
      <el-col v-for="(status,index) in statusList" :key="'icharging_status_'+index" :span="6" style="margin:2px 0;">
        <el-tag :type="status.working? '' :'info'" :closable="false" style="width:36px;">
          <label>{{ status.id + 1 }}</label>
          <!-- <span>{{ status.current }}</span> -->
        </el-tag>
        <template v-if="status.working">
          <svg-icon v-if="status.isSync" icon-class="usb-link" style="color:#E6A23C;" />
          <svg-icon v-else-if="status.full" icon-class="mobile" style="color:#5CBB7A;" />
          <svg-icon v-else icon-class="mobile-charging" style="color:#409EFF;" />
        </template>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import BaseController from './BaseController'
  export default {
    name: "IChargingController",
    mixins: [BaseController],
    data() {
      return {
        statusList: []
      }
    },
    created() {
      // this.statusList = []
    },
    methods: {
      setItemDevice(data) {
        const {
          door,
          sterilize,
          charging,
          changed,
          children
        } = data;
        if (children && children.length > 0) {
          this.statusList = [].concat(children)
        }
        Object.assign(this.device, {
          door,
          sterilize,
          charging,
          changed,
          online: true,
        });
        this.$emit("input", this.device);
      },
      deviceLoaded(device) {
        this.statusList = device.children ? [].concat(device.children) : []
      },
      handleRefresh() {
        this.deviceCommand('STATUS', '')
      }
    },
  };

</script>
